//
// Timeline page
// --------------------------------------------------

.layout-timeline {
	background: @widgetBgGray;
	&.layout-timeline-white {
		background: #fff;
	}
	> [class*="span"] ~ [class*="span"] {
		&:after {
			width: 2px;
			background: #d2d1d0;
		}
	}
	.media {
		margin: 0 0 @spacing;
		.media-body {
			padding: 10px 0 0;
			line-height: 17px;
			.author { font-size: 14px; }
		}
	}
	.glyphicons.pencil {
		position: absolute;
		top: @spacing;
		right: @spacing;
		margin: 0;
		padding: 0;
		width: 20px;
		height: 20px;
		i:before {
			top: 0;
			right: 0;
			font-size: 17px;
			color: #cccccc;
		}
	}
	ul.timeline {
		list-style: none;
		margin: 0;
		padding: @spacing @spacing @spacing @spacing*2;
		> li {
			position: relative;
			padding: 0 0 @spacing;
			.date {
				width: 50px;
				padding: 5px 0;
				text-align: center;
				text-transform: uppercase;
				font-weight: 600;
				position: absolute;
				left: -70px;
				top: 0;
				z-index: 2;
				strong {
					display: block;
					line-height: 10px;
					padding: 3px 0 0;
				}
			}
			.type {
				position: absolute;
				text-transform: uppercase;
				color: @bodyText;
				font-weight: 600;
				padding: 0 35px 0 0;
				top: 15px;
				width: 100px;
				text-align: right;
				left: -195px;
				line-height: 24px;
				z-index: 2;
				i:before { left: auto; right: 0; color: #c6c6c5; }
				.time { position: absolute; top: 24px; right: 0; color: #c6c6c5; }
				&:after {
					display: block;
					content: "";
					position: absolute;
					right: -60px;
					top: 12px;
					width: 45px;
					height: 2px;
					background: #d2d1d0;
				}
				&:before {
					display: block;
					content: "";
					position: absolute;
					right: -20px;
					top: 9px;
					width: 8px;
					height: 8px;
					background: #d2d1d0;
				}
			}
			.separator {
				.type { top: 60px; }
			}
			.alert-gray {
				background: #f8f8f8;
				color: @bodyText;
				.rounded();
				border: none;
				margin: 0;
			}
			p.glyphicons {
				padding: 5px 0 5px 25px;
				i:before { color: #dfdfdf; font-size: 17px; top: 5px; left: 0; }
			}
			.widget-body-gray {
				.glyphicons i:before { color: @bodyText; }
				a { color: #000; text-decoration: underline; }
				strong { font-weight: 400; color: #000; }
			}
			&.active {
				.type { 
					color: @primaryColor; 
					i:before { color: @primaryColor; }
					&:before, &:after {
						background: @primaryColor;
					} 
				}
				&:before {
					display: block;
					position: absolute;
					content: "";
					top: 0;
					bottom: 0;
					left: -45px;
					width: 2px;
					z-index: 2;
					background: @primaryColor;
				}
			}
		}
	}
	&.layout-timeline-mirror {
		padding-left: 8px;
		ul.timeline {
			> li:nth-child(odd){
				left: -100%;
				width: 100%;
				margin-left: -90px;
				.date {
					left: auto;
					right: -70px;
				}
				.type {
					left: auto;
					right: -195px;
					text-align: left;
					padding: 0 0 0 35px;
					i:before {
						left: 0;
						right: auto;
					}
					.time {
						left: 0;
						right: auto;
					}
					&:before {
						left: -18px;
						right: auto;
					}
					&:after {
						left: -60px;
						right: auto;
					}
				}
				&.active{
					&:before {
						left: auto;
						right: -47px;
					}
				}
			}
		}
	}
}
.nav-timeline {
	> li {
		margin: 0 0 5px;
		> a {
			background: #b3b3b3;
			border: none;
			margin: 0 !important;
			font-weight: 600;
			.rounded();
			&.glyphicons {
				padding: 8px 12px;
				i:before { position: absolute; left: auto; right: 8px; top: 8px; color: #fff; }
			} 
		}
		&.active {
			> a {
				background: @primaryColor;
			}
		}
	}
}